<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        .img-area {
            margin: 10px;
            position: relative;
            width: 150px;
            height: 150px;
            /* display: none; */
        }

        .img-area i {
            position: absolute;
            right: 5px;
            top: 2px;
            color: #fff;
            z-index: 1;
            cursor: pointer;
        }

        .img-area::after {
            content: "";
            position: absolute;
            height: 20px;
            background: rgba(0, 0, 0, .5);
            top: 0;
            left: 0;
            width: 100%;
            border-radius: 5px 5px 0 0;
        }

        .img-area img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
            border-radius: 5px;
            border: 1px solid gray;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>
            <a href="./select_movie.html" class="layui-btn layui-btn-sm">返回</a>
            <span id="spantitle">添加电影</span>
        </legend>
    </fieldset>

    <form class="layui-form" lay-filter="movieEdit" action="" onsubmit="return false">
        <div class="layui-form-item">
            <label class="layui-form-label">电影名称</label>
            <div class="layui-input-block">
                <input type="text" style="width:400px;" name="name" lay-vertype="tips" placeholder="请输入电影名称" lay-verify="required" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">英文名称</label>
            <div class="layui-input-block">
                <input type="text" style="width:400px;" name="ename" placeholder="请输入电影英文名称" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">海报图</label>
            <div class="layui-input-block">
                <div class="upload-area">
                    <button type="button" class="layui-btn btn-area" id="btn_image">
                        <i class="layui-icon"></i>上传图片
                    </button>
                    <div class="img-area">
                        <img src="" alt="">
                        <i class="layui-icon layui-icon-close"></i>
                        <input type="text" name="poster" id="imgSrc" style="display:none">
                    </div>

                </div>

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电影类型</label>
            <div class="layui-input-block" id="movieTypes">

            </div>
            <input type="text" name="type" class="layui-input inpType" id="inpType" style="display:none">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">首映地区</label>
            <div class="layui-input-block" id="movieAreas">
            </div>
            <input type="text" name="area" class="layui-input inparea" style="display:none">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">时长</label>
            <div class="layui-input-inline">
                <input type="text" name="time" lay-vertype="tips" placeholder="请输入电影时长" lay-verify="required|number" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">分钟</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上映时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test1" placeholder="年-月-日" name="upDate">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">评分</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" placeholder="请输入评分(0-10)" name="score" lay-vertype="tips" lay-verify="required|number|score">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">票房</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" placeholder="请输入票房" name="count">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">简介</label>
            <div class="layui-input-inline" style="width:600px;">
                <textarea name="intro" lay-verify="required" placeholder="请输入电影简介" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="btnSubmit" type="button" lay-submit="" lay-filter="movie_add">添加电影</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <!-- <script src="../../js/common.js"></script> -->
    <script src="../../js/lodash.min.js"></script>
    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script src="../../layui/layui.js"></script>
    <script>
        //添加电影类型、上映地址
        const movieType = ["爱情", "喜剧", "动画",
            "剧情", "恐怖", "惊悚", "科幻", "动作", "悬疑", "犯罪", "冒险", "战争",
            "奇幻", "运动", "家庭", "古装", "武侠", "西部", "历史", "传记", "歌舞", "黑色电影",
            "短片", "纪录片", "其他"];
        const addressType = ["中国大陆", "美国", "韩国", "日本", "中国香港",
            "中国台湾", "泰国", "印度", "法国", "英国", "俄罗斯", "意大利", "西班牙",
            "德国", "波兰", "澳大利亚", "伊朗", "其他"];
        for (let i = 0; i < movieType.length; i++) {
            $("<input>").prop({
                type: "checkbox",
                title: `${movieType[i]}`,
                value: `${movieType[i]}`
            }).appendTo("#movieTypes");
        }
        for (let i = 0; i < addressType.length; i++) {
            $("<input>").prop({
                type: "checkbox",
                title: `${addressType[i]}`,
                value: `${addressType[i]}`,
            }).appendTo("#movieAreas");
        }

        //裁剪地址
        function query(url) {
            const q = {};
            _.last(url.split("?")).split("&")
                .map(it => it.split("="))
                .forEach(([p, v]) => {
                    q[p] = decodeURIComponent(v);
                });
            return q;
        }
        const q = query(location.href);
        let words = "添加电影";
        let method = "post";
        let url = "/api/Movie";
        $(".img-area").css("display: none;");
        if (q.id) {
            words = "修改电影";
            method = "put";
            url = "/api/Movie/" + q.id;
            console.log(url);
        }

        $("#spantitle").html(words);
        $("#btnSubmit").html(words);
        layui.use(['form', 'layer', 'laydate'], async function () {
            const form = layui.form;
            const layer = layui.layer;
            var laydate = layui.laydate;

            //常规用法
            laydate.render({
                elem: '#test1'
            });



            if (q.id) {
                const movie = await $.get("/api/Movie/" + q.id);
                $(".img-area img").prop("src", movie.data.poster);
                const types = movie.data.type.split(",");
                const areas = movie.data.area.split(",");
                types.forEach(type => {
                    $("#movieTypes :checkbox").each(function (i, elem) {
                        console.log(elem)

                        if (type.includes(elem.value)) {
                            elem.checked = true;
                        }
                    });
                })
                areas.forEach(area => {
                    $("#movieAreas :checkbox").each(function (i, elem) {
                        if (area.includes(elem.value)) {
                            elem.checked = true;
                        }
                    });
                })
                form.val("movieEdit", movie.data);
            }
            //监听提交
            form.on('submit(movie_add)', async function (data) {
                //得到电影类型  复选框的值
                const tpyeArr = $("#movieTypes .layui-form-checked span");
                let strType = "";
                for (let i = 0; i < tpyeArr.length; i++) {
                    if (i == tpyeArr.length - 1) {
                        strType += $("#movieTypes .layui-form-checked span").eq(i).text();
                    } else {
                        strType += $("#movieTypes .layui-form-checked span").eq(i).text() + ",";
                    }
                }
                data.field.type = strType;
                //得到电影上映地区 复选框的值
                const areaArr = $("#movieAreas .layui-form-checked span");
                let strArea = "";
                for (let i = 0; i < areaArr.length; i++) {
                    if (i == areaArr.length - 1) {
                        strArea += $("#movieAreas .layui-form-checked span").eq(i).text();
                    } else {
                        strArea += $("#movieAreas .layui-form-checked span").eq(i).text() + ",";
                    }
                }
                data.field.area = strArea;
                console.log(data.field)
                await $.ajax(url, {
                    method,
                    data: data.field
                });
                layer.msg(words + '成功', {
                    icon: 1,
                    time: 1000
                }, function () {
                    location.href = "./select_movie.html";
                });
                form.render("");
            });
        });

        //图片文件上传
        layui.use('upload', function () {
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                // contentType: "image/png",
                elem: '#btn_image', //绑定元素
                method: "post",
                url: '/api/upload', //上传接口
                field: "imgfile",//设置文件域的字段名
                acceptMime: "image/*",//只显示图片文件
                size: 2000,//文件最大允许上传大小
                multiple: true,//是否允许多文件上传
                drag: true,//是否接受拖拽的文件上传
                done: function (res) {
                    console.log(res);
                    //上传完毕回调
                    $(".img-area img").prop("src", res.data[0]);
                    $("#imgSrc").val(res.data[0]);
                    $(".img-area").show();
                },
                error: function () {
                    //请求异常回调
                    console.log("错误")
                }
            });
        });
        $(".img-area i").click(function () {
            $(".img-area img").prop("src", "");
            $(".img-area").hide();
        });
    </script>

</body>

</html>